<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./resrt.css">
    <style>
        
        .box{
            width: 500px;
            margin: 50px auto;
            border: 3px solid rgb(241, 58, 150);
            padding: 20px;
        }
        .math{
            display: flex;
            margin-top: 40px;
        }
        .left{
            width: 30%;
        }
        .left img {
            width: 100%;
            border-radius: 5px;
        }
        .middle{
            width: 45%;
            padding: 10px 20px;
            box-sizing: border-box;
            line-height: 35px;
        }
        .right{
            line-height: 150px;
        }
        h3{
            font-weight: 700;
            font-size: 14px;
        }
        h4,h5,h6{
            font-size: 12px;
        }
        .shopping h5{
            line-height: 100px;
        }
        
    </style>
</head>
<body>
    <div id="ele">
        <div class="box" >
            <h2>热门商品</h2>
            <div class="shop math" v-for="(item , index) in shop" v-bind:key="index">
                <div class="left">
                    <img v-bind:src="item.pic" alt="">
                </div>
                <div class="middle">
                    <h3>{{item.name}}</h3>
                    <h4>{{item.youhui}}</h4>
                    <h5>{{item.money}}</h5>
                    <h6>{{item.mendian}}</h6>
                </div>
                <div class="right">
                    <button>立即兑换</button>
                </div>
            </div>
        </div>
        <div class="box" >
            <h2>购物车</h2>
            <div class="shopping math" v-for="(item , index) in shopping" v-bind:key="index">
                <div class="left">
                    <img v-bind:src="item.pic" alt="">
                </div>
                <div class="middle">
                    <h3>{{item.name}}</h3>
                    <h5>{{item.money}}</h5>
                </div>
                <div class="right">
                    <h6>-&emsp; {{item.num}} &emsp;+</h6>
                </div>
            </div>
        </div>
        <div class="box" >
            <h2>购物车</h2>
            <div class="renwu math" v-for="(item , index) in renwu" v-bind:key="index">
                <div class="left">
                    <img v-bind:src="item.pic" alt="">
                </div>
                <div class="middle">
                    <h3>{{item.name}}</h3>
                    <h5>{{item.jiangli}}</h5>
                </div>
                <div class="right">
                    <button>{{item.state == 1 ? '未完成' : item.state == 2 ? '进行中' : '已完成'}}</button>
                </div>
            </div>
        </div>

    </div>
    <div id="ele">
        <div class="box" >
            <h2>购物车</h2>
            <div class="renwu math" v-bind:v-for="(item , index) in renwu" v-bind:key="index">
                <div class="left">
                    <img v-bind:src="item.pic" alt="">
                </div>
                <div class="middle">
                    <h3>{{item.name}}</h3>
                    <h5>{{item.jiangli}}</h5>
                </div>
                <div class="right">
                    <button>{{item.state == 1 ? '未完成' : item.state == 2 ? '进行中' : '已完成'}}</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var v = new Vue({
        el: '#ele',
        data:{
            shop:[
                {name : '脐橙3斤，快速到家' , youhui: '满5000减5块'  , money : 30 , mendian : '通用门店' , pic : './pic.jpg'},
                {name : '枇杷3斤，快速到家' , youhui: '满50000减5块'  , money : 30 , mendian : '通用门店' , pic : './pic.jpg'},
                {name : '波罗蜜3斤，快速到家' , youhui: '满500000减5块'  , money : 30 , mendian : '通用门店' , pic : './pic.jpg'}
            ],
            shopping:[
                {name : '秋刀鱼' , money : 35 , pic : './pic.jpg' , num : 1},
                {name : '带鱼' , money : 350 , pic : './pic.jpg' , num : 5},
                {name : '鲨鱼' , money : 3500 , pic : './pic.jpg' , num : 3}
            ],
            renwu:[
                {name : '咪咕咪咕' , pic : './pic.jpg' , jiangli : '5000T流量' , state : 1},
                {name : '米西米西' , pic : './pic.jpg' , jiangli : '500T流量' , state : 2},
                {name : '哈希还行' , pic : './pic.jpg' , jiangli : '50T流量' , state : 1},
                {name : '耶耶耶耶' , pic : './pic.jpg' , jiangli : '5T流量' , state : 3}
            ]
        }
    })
    // var vu = new Vue({
    //     el:'#app',
    //     data:{
    //         list:[
    //             {type:['shop' , 'shopping' , 'renwu'] , lists: []}
    //         ]
    //     }
    // })
</script>